<template>
	<div class="playerinformation">
		<!-- 查询表单 -->
		<el-form label-width="80px" class="search">
		  <el-form-item label="收支编号">
		    <el-input v-model="search_id" placeholder="请输入收支编号"></el-input>
		  </el-form-item>
		  <el-form-item label="收支时间">
			<el-col :span="11">
			<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="search_date" style="width: 150px;"></el-date-picker>
			</el-col>
		  </el-form-item>
		</el-form>
		<!-- 查询按钮 -->
		<el-button type="primary" @click="search()">查询</el-button>
		<el-button type="warning" @click="clear()">清空</el-button>
		<el-button type="success" @click="isAdd()" style="float: right; margin-right: 40px;">添加</el-button>
		<!-- 表格分页 -->
		<el-table :data="tableData" border fit style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
			<el-table-column fixed type="index" label="序号">
				<template scope="scope"><span>{{scope.$index+(pageNum - 1) * pageSize + 1}} </span></template>
			</el-table-column>
		    <el-table-column prop="id" label="收支编号"></el-table-column>
		    <el-table-column prop="incomeType" label="收支类型"></el-table-column>
			<el-table-column prop="description" label="收支描述"></el-table-column>
			 <el-table-column prop="price" label="收支金额"></el-table-column>
			<el-table-column prop="date" label="收支日期"></el-table-column>
		    <el-table-column fixed="right" label="操作">
		      <template slot-scope="scope">
		        <el-button @click="show(scope.row)" type="text" size="small" icon="el-icon-edit" circle>编辑</el-button>
		        <el-button @click="isDel(scope.row)" type="text" size="small" icon="el-icon-delete" circle>删除</el-button>
		      </template>
		    </el-table-column>
		</el-table>
		<div>
			<el-pagination background layout="prev, pager, next" :total="pages" :current-page="pageNum" @current-change="changePageNum"></el-pagination>
		</div>

		<el-dialog :title="titleMsg" :visible.sync="dialogFormVisible" >
			<el-form :model="form">
				<el-form-item label="收支编号" :label-width="formLabelWidth">
					<el-input v-model="form.id" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="收支类型" :label-width="formLabelWidth">
					<el-select v-model="form.type" placeholder="请选择收支类型" style="width:160px">
						<el-option v-for="item in incomeTypes" :key="item.value" :label="item.lable" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="收支描述" :label-width="formLabelWidth">
					<el-input v-model="form.description" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="收支金额" :label-width="formLabelWidth">
					<el-input v-model="form.price" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="收支日期" :label-width="formLabelWidth">
					<el-input v-model="form.date" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel()">取 消</el-button>
				<el-button type="primary" @click="edit()">确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	export default{
		name:"IncomeCount",
		data(){
			return{
				search_id:"",
				search_date:"",
				pageNum:1,
				pageSize:3,
				pages:1,
				titleMsg:'',
				buttonMsg:'',
				incomeTypes:[
					{
						value:0,
						lable:'支入'
					},
					{
						value:1,
						lable:'支出'
					},
				],
				tableData: [],
				dialogFormVisible: false,
				form: {},
				formLabelWidth: '120px'
			}
		},
		methods:{
			search(){
				const data = {
					pageNum : this.pageNum,
					pageSize : this.pageSize,
					id : this.search_id,
					date : this.search_date
				};
				let that = this;
				this.$axios.post(that.$global.zuulIp+"/finance/getMechanismConsumeDetailPageInfo",data).then((response)=>{
					that.tableData = response.data.list;
					for(let i = 0;i < that.tableData.length;i++){
						that.tableData[i].price = that.tableData[i].price.toFixed(2);
						for(let j = 0;j < that.incomeTypes.length;j++){
							if(that.tableData[i].type == that.incomeTypes[j].value){
								that.$set(that.tableData[i],'incomeType',that.incomeTypes[j].lable);
								break;
							}
						}
					}
					that.pages = parseInt(response.data.pages)*10;
				}).catch((response)=>{
					console.log(response);
				})
			},
			clear(){
				this.search_id = '';
				this.search_date = '';
			},
			isAdd(){												//添加按钮触发事件
				this.buttonMsg = '添加';
				this.titleMsg = '添加机构收支信息';
				this.form = {};
				this.dialogFormVisible = true;
			},
			show(row) {
				let that = this;
				this.$axios.get(that.$global.zuulIp+"/finance/getMechanismConsumeDetailById?id="+row.id).then((response)=>{
					that.form = response.data;
				}).catch((response)=>{
					console.log(response);
				});
				this.buttonMsg = '编辑';
				this.titleMsg = '编辑机构收支信息';
				this.dialogFormVisible = true;
			},
			cancel(){
				this.dialogFormVisible = false;
			},
			isDel() {
				this.$confirm('此操作将删除该收支记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						
						that.$axios.get(that.$global.zuulIp+"/finance/delMechanismConsumeDetail?id="+row.id).then((response)=>{
							if(response.data>0){
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
							}else{
								that.$message({
									type: 'error',
									message: '删除失败,请联系管理员!'
								});
							}
							that.pageNum = 1;
							that.search();
						}).catch((response)=>{
							console.log(response);
						})

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});          
				});
			},
			changePageNum(currentPage){
				this.pageNum = currentPage;
				this.search();
			},
		},
		mounted:function(){
			this.search();
		}
	}
</script>

<style scoped="scoped">
	.search{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
	.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-pagination{
	  margin: 20px;
	  text-align: right;
  }

  .el-dialog .el-form{
	  width: 500px;
  }
</style>
